/**
 * webpack配置
 */

const path = require("path"); // path模块
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入打包html的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 提取css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩css
// const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 删除dist

module.exports = {
  target: "web",

  // 1. 入口
  // entry: "./src/js/home.js",
  entry: {
    captcha: "./src/lib/captcha/captcha-mini.js", // 验证码
    commonCss: "./src/js/common/commonCss.js", // 公共的css

    // 很多地方要用到的公用的js
    dom: "./src/js/common/dom.js", // dom.js
    http: "./src/js/common/http.js", // http.js
    utils: "./src/js/common/utils.js", // utils.js

    /* 每个页面自己的js */
    advertisement: "./src/js/advertisement.js", // 广告
    home: "./src/js/home.js", // 首页
    login: "./src/js/login.js", // 登录
    register: "./src/js/register.js", // 注册
  },

  // 2. 出口
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name]-[hash:10].js",
    publicPath: "./",
  },

  // 3. module
  module: {
    //规则
    rules: [
      // css
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
          "postcss-loader",
        ],
      },
      // less
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
      //css背景图片打包
      {
        test: /\.(png|jpg|gif)$/,
        loader: "url-loader",
        options: {
          name: "[hash].[ext]",
          limit: 10 * 1024,
          esModule: false,
          outputPath: "img", // 打包后输出目录
        },
      },
      //HTML引入图片打包
      {
        test: /\.html$/,
        use: ["html-loader"],
      },
      //字体图标
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: "file-loader",
        options: {
          outputPath: "fonts", // 输出到这个文件夹中
        },
      },
      // js
      {
        test: /\.js$/,
        use: ["babel-loader"],
        exclude: /node_modules/,
      },
    ],
  },

  // 4. 插件
  plugins: [
    // 广告页
    new HtmlWebpackPlugin({
      template: "./src/page/advertisement.html", // 你要以哪个html为模板 进行打包
      filename: "advertisement.html",
      chunks: ["advertisement", "commonCss", "dom"], // 自己需要哪些模块
    }),

    // 注册页面
    new HtmlWebpackPlugin({
      template: "./src/page/register.html", // 你要以哪个html为模板 进行打包
      filename: "register.html",
      chunks: ["register", "commonCss", "http", "dom", "utils", "captcha"], // 自己需要哪些模块
    }),

    // 登录页面
    new HtmlWebpackPlugin({
      template: "./src/page/login.html", // 你要以哪个html为模板 进行打包
      filename: "login.html",
      chunks: ["login", "commonCss", "dom", "http", "utils"], // 自己需要哪些模块
    }),

    // 使用插件 这个插件是把 html 打包到 dist 里面
    new HtmlWebpackPlugin({
      template: "./src/page/home.html", // 你要以哪个html为模板 进行打包
      filename: "home.html",
      chunks: ["home", "commonCss", "http", "dom", "utils"], // 自己需要哪些模块
    }),

    // 提取css
    new MiniCssExtractPlugin({
      filename: "css/[name]-[hash].css",
    }),

    // 压缩css
    new OptimizeCssAssetsWebpackPlugin(),

    // 删除dist
    // new CleanWebpackPlugin(),
  ],

  // 5. 模式
  mode: "development",

  // 6. 启动开发服务器
  // 开发服务器
  devServer: {
    contentBase: path.resolve(__dirname, "dist"), // 启动服务器目录
    compress: true, // 启动gzip压缩
    port: 8088, // 端口
    open: true, // 自动打开服务
    openPage: "advertisement.html", // 指定打开服务器访问的页面
  },
};
